<template>
	<!-- <div class="btmNav"> -->
		<van-tabbar v-model="active" route>
		  <van-tabbar-item v-for="(item,index) in icon" :key="index" :to='item.path'>
		    <span>{{item.name}}</span>
		    <template #icon="props">
		      <img :src="props.active ? item.active : item.inactive" style="width: 1.25rem;height: 1.25rem;" />
		    </template>
		  </van-tabbar-item>
		</van-tabbar>
	<!-- </div> -->
</template>

<script>
	import { Tabbar, TabbarItem } from 'vant';
	import Vue from 'vue';
	Vue.use(Tabbar);
	Vue.use(TabbarItem);
	export default {
	  data() {
	    return {
	      active: 0,
	      icon: [
			  {path:'/',active: require('../assets/imgs/index_cur.png'),inactive: require('../assets/imgs/index.png'),name:'首页'},
			  {path:'/Sort',active: require('../assets/imgs/cate_cur.png'),inactive: require('../assets/imgs/cate.png'),name:'分类'},
			  {path:'/Shopping',active: require('../assets/imgs/cart.png'),inactive: require('../assets/imgs/cart.png'),name:'购物车'},
			  {path:'/My',active: require('../assets/imgs/my_cur.png'),inactive: require('../assets/imgs/my.png'),name:'我的订单'},
			  ]
	    };
	  },
	  components:{
		  // Tabbar,TabbarItem
	  }
	};
</script>

<style>
	.btmNav{
		height: 50px;
		background-color: #fff;
	}
	.btmNav::after{
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
</style>
